<template>
  <a-card :bordered="false" :title="modalTitle" v-show="visible">
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right" >
          <a-button v-show="currentTab!== 0" style="margin-left: 8px" @click="prev()">上一步</a-button>
          <a-button style="margin-left: 8px" v-show="currentTab!== 3" type="primary" @click="next()">下一步</a-button>
          <a-button style="margin-left: 8px" type="primary" @click="save()">保存</a-button>
          <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
        </span>
      </a-col>
    </a-row>
    <a-steps :current="currentTab" >
      <a-step title="故障现象" />
      <a-step title="检查处理过程" />
      <a-step title="维修报告" />
      <a-step title="改进措施" />
    </a-steps>
    <a-form-model ref="form" :model="model" :rules="rules">

      <row-list :col="1">
        <row-item v-show="currentTab=== 0">
          <a-form-model-item required label="编号" prop="no">
            <a-input
              disabled="disabled"
              v-model="model.no"
            />
          </a-form-model-item>
        </row-item>
        <row-item v-show="currentTab=== 0">
          <a-form-model-item required label="分析时间" prop="analyzeTime">
            <a-date-picker
              style="width: 100%"
              :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
              v-model="model.analyzeTime"/>
          </a-form-model-item>
        </row-item>
        <row-item v-show="currentTab=== 0">
          <a-form-model-item required label="故障现象" prop="problemDesc">
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-model="model.problemDesc"/>
          </a-form-model-item>
        </row-item>
        <row-item v-show="currentTab=== 1">
          <a-form-model-item required label="检查处理过程" prop="problemDesc">
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-model="model.checkProcess"/>
          </a-form-model-item>
        </row-item>
        <row-item v-show="currentTab=== 2">
          <a-form-model-item label="维修报告" prop="reasonAnalysis">
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-model="model.reasonAnalysis"/>
          </a-form-model-item>
        </row-item>
        <row-item v-show="currentTab=== 3">
          <a-form-model-item label="改进措施" prop="reasonAnalysis">
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-model="model.improveMeasure"/>
          </a-form-model-item>
        </row-item>
      </row-list>
    </a-form-model>
  </a-card>
</template>

<script>
import { addRepairReason, updateRepairReason } from '@/api/repair/repair-reason'

export default {
  name: 'BaseRepairReason',
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      currentTab: 0,
      model: {
        id: '',
        repairId: '',
        no: '',
        analyzeTime: null,
        problemDesc: '',
        checkProcess: '',
        reasonAnalysis: '',
        improveMeasure: ''
      },
      addFlag: false,
      form: this.$form.createForm(this),
      visible: false,
      rules: {
        no: [
          { required: true, message: '请输入编号', trigger: 'blur' }
        ],
        analyzeTime: [
          { required: true, message: '请输入分析时间', trigger: 'blur' }
        ],
        problemDesc: [
          { required: true, message: '请输入故障现象', trigger: 'blur' }
        ],
        checkProcess: [
          { required: true, message: '请输入检查处理过程', trigger: 'blur' }
        ],
        reasonAnalysis: [
          { message: '请输入维修报告', trigger: 'blur' }
        ],
        improveMeasure: [
          { message: '请输入改进措施', trigger: 'blur' }
        ]
      }
      // 下拉框map
    }
  },
  props: {},
  created () {
    // 下拉框map
  },
  methods: {
    base (record, repairForm = {}) {
      this.visible = true
      this.$refs.form.resetFields()
      this.currentTab = 0
      // 如果是空标识添加
      if (this.BaseTool.Object.isBlank(record)) {
        this.addFlag = true
        this.model.repairId = repairForm.id
        this.model.no = repairForm.no
        this.modalTitle = '添加'
        return
      }
      this.addFlag = false
      record.analyzeTime = this.BaseTool.Moment(record.analyzeTime, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
      this.modalTitle = '编辑'
      // 日期处理
      this.model = record
    },
    next () {
      this.currentTab += 1
    },
    prev () {
      this.currentTab -= 1
    },
    save () {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 日期处理
          this.model.analyzeTime = this.BaseTool.Date.formatter(this.model.analyzeTime, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
          if (this.addFlag) {
            addRepairReason(this.model)
              .then((res) => {
                this.confirmLoading = false
                this.handleCancel({})
              }).catch(() => {
                this.confirmLoading = false
              })
          } else {
            updateRepairReason(this.model)
              .then(() => {
                this.handleCancel(this.model)
              }).catch(() => {
                this.confirmLoading = false
              })
          }
        } else {
          console.log(valid)
          this.confirmLoading = false
          return false
        }
      })
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      this.$emit('ok', values)
    }

  }
}
</script>
<style>
  .ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon {
    color: #fff !important;
  }
</style>
